<template>
  <div :style="{padding: (config.verticalPadding * 2) + 'rpx 0;'}" style="background:white;margin-top: 5rpx;font-size:0;" id="shipin">
    <video class="index-video" :id='config.url'  :style="{height: (config.height * 2) + 'rpx'}" :src="config.url"  :poster="config.coverUrl" controls></video>
<!--    <video class="index-video" v-if="!playerLivestart" :style="{height: (config.height * 2) + 'rpx'}" src="" autoplay="true" poster="config.coverUrl" controls></video>-->

  </div>
</template>
<script>
export default {
  name: "video-list",
    data() {
        return {
            playNumber : 1,
            playerLivestart:false,
        };
    },
  props: {
    config: {
      type: Object,
      required: true
    }
  },
    created() {

    },
    methods:{
        //获取每个视频的距离顶部的高度
        videoHeight(avc) {
            let that = this;
            if (that.config.autoplay) {
                let videoCtx = wx.createVideoContext(that.config.url, this)
                //微信api获取节点
                let query12 = wx.createSelectorQuery();
                query12.select('#shipin').boundingClientRect();
                query12.selectViewport().scrollOffset()
                query12.exec((rect) => {

                    if (rect[0].bottom <= 714.9 && that.playNumber == 1) {
                        // that.playerLivestart = true;
                        videoCtx.play() //播放视频
                        that.playNumber += 1;
                    }
                    /*else{
                    && rect[0].bottom >= (that.config.height/2)
                    // that.playerLivestart = false;
                    videoCtx.pause()   //暂停视频
                }*/

                    /*  rect[0].forEach(item => {
                      this.meigeSP.push(item.top)
                  })*/
                })
            }
        },
    }
}


</script>

<style scoped>
.index-video {
  width: 100%;
}
</style>


